<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="style/base.css" type="text/css">
    <link rel="stylesheet" href="style/global.css" type="text/css">
    <link rel="stylesheet" href="style/header.css" type="text/css">
    <link rel="stylesheet" href="style/cart.css" type="text/css">
    <link rel="stylesheet" href="style/footer.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

    <!--<script type="text/javascript" src="js/cart1.js"></script>-->

</head>
<body>
<!-- 顶部导航 start -->
<div class="topnav">
    <div class="topnav_bd w990 bc">
        <div class="topnav_left">

        </div>
        <div class="topnav_right fr">
            <ul>
                <li>您好，欢迎来到京西！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>]</li>
                <li class="line">|</li>
                <li>我的订单</li>
                <li class="line">|</li>
                <li>客户服务</li>

            </ul>
        </div>
    </div>
</div>
<!-- 顶部导航 end -->

<div style="clear:both;"></div>

<!-- 页面头部 start -->
<div class="header w990 bc mt15">
    <div class="logo w990">
        <h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="京西商城"></a></h2>
        <div class="flow fr">
            <ul>
                <li class="cur">1.我的购物车</li>
                <li>2.填写核对订单信息</li>
                <li>3.成功提交订单</li>
            </ul>
        </div>
    </div>
</div>
<!-- 页面头部 end -->

<div style="clear:both;"></div>

<!-- 主体部分 start -->
<div id="cartApp" class="mycart w990 mt10 bc">
    <h2><span>我的购物车</span></h2>
    <table>
        <thead>
        <tr>
            <th><input type="checkbox" v-model="selectAll">all</th>
            <th class="col1">商品名称</th>
            <th class="col2">商品信息</th>
            <th class="col3">单价</th>
            <th class="col4">数量</th>
            <th class="col5">小计</th>
            <th class="col6">操作</th>
        </tr>
        </thead>
        <tbody>

        <tr v-for="ele in cartList">
            <td><input type="checkbox" v-model="ele.isSelected"></td>
            <td class="col1"><a href=""><img src="images/cart_goods1.jpg" alt=""/></a> <strong><a href="">{{
                ele.goods_name }}</a></strong>
            </td>
            <td class="col2">{{ ele.descp }}</td>
            <td class="col3">￥<span>{{ ele.price }}</span></td>
            <td class="col4">
                <a href="javascript:;" @click="reduce(ele)" class="reduce_num"></a>
                <input type="number" size="10" v-model="ele.number" class="amount"/>
                <a href="javascript:;" @click="add(ele)" class="add_num"></a>
            </td>
            <td class="col5">￥<span>{{  ele.price *  ele.number }}</span></td>
            <td class="col6"><a href="javascript:;" @click="del(ele)">删除</a></td>
        </tr>

        </tbody>
        <tfoot>
        <tr>
            <td colspan="7">购物金额总计： <strong>￥ <span id="total">{{ totalPrice }}</span></strong></td>
        </tr>
        </tfoot>
    </table>
    <div class="cart_btn w990 bc mt10">
        <a href="" class="continue">继续购物</a>
        <a href="" class="checkout">结 算</a>
    </div>
</div>
<!-- 主体部分 end -->

<div style="clear:both;"></div>
<!-- 底部版权 start -->
<div class="footer w1210 bc mt15">
    <p class="links">
        <a href="">关于我们</a> |
        <a href="">联系我们</a> |
        <a href="">人才招聘</a> |
        <a href="">商家入驻</a> |
        <a href="">千寻网</a> |
        <a href="">奢侈品网</a> |
        <a href="">广告服务</a> |
        <a href="">移动终端</a> |
        <a href="">友情链接</a> |
        <a href="">销售联盟</a> |
        <a href="">京西论坛</a>
    </p>
    <p class="copyright">
        © 2005-2013 京东网上商城 版权所有，并保留所有权利。 ICP备案证书号:京ICP证070359号
    </p>
    <p class="auth">
        <a href=""><img src="images/xin.png" alt=""/></a>
        <a href=""><img src="images/kexin.jpg" alt=""/></a>
        <a href=""><img src="images/police.jpg" alt=""/></a>
        <a href=""><img src="images/beian.gif" alt=""/></a>
    </p>
</div>
<!-- 底部版权 end -->
</body>
<script src="./js/vue.js"></script>
<script>
    /*
    * 在工作中，购物车是如何实现的？
    * */
    const vm = new Vue({
        el: '#cartApp',
        data: {
            cartList: [
                {
                    id: 1,
                    goods_name: '【1111购物狂欢节】惠JackJones杰克琼斯纯羊毛菱形格',
                    cover: './images/cart_goods1.jpg',
                    descp: '颜色：073深红 尺码：170/92A/S',
                    price: 234,
                    number: 12,
                    isSelected: false,
                },
                {
                    id: 2,
                    goods_name: '【12 2购物狂欢节】惠JackJones',
                    cover: './images/cart_goods2.jpg',
                    descp: '颜色：073深红',
                    price: 1234,
                    number: 42,
                    isSelected: true,
                },
                {
                    id: 3,
                    goods_name: '【6 18购物狂欢节】杰克琼斯纯羊毛菱形格',
                    cover: './images/cart_goods3.jpg',
                    descp: '尺码：170/92A/S',
                    price: 2354,
                    number: 5,
                    isSelected: false,
                }
            ]
        },
        computed: {
            selectAll: {
                get() {
                    /*全选的状态由所有的商品的选中状态来决定 every */
                    if (this.cartList.length == 0) {
                        return false;
                    }

                    return this.cartList.every(item => {
                        return item.isSelected;
                    })

                },
                set(val) {
                    /*由于当前的元素是一个 checkbox 在被点击的时候，则会触发 set ，参数就是点击的状态值. */
                    this.cartList.map(item => {
                        item.isSelected = val;
                        return item;
                    })

                }
            },

            /*计算属性完成*/
            totalPrice() {
                // 商品小计之和
                return this.cartList.reduce((prev, item) => {
                    if (item.isSelected) {
                        return prev + item.price * item.number;
                    } else {
                        return prev;
                    }
                }, 0)

            }
        },
        methods: {
            reduce(ele) {
                if (ele.number == 1) {
                    return;
                }
                ele.number--;
                if (ele.number <= 1) {
                    alert('购买的最少数据为 1！');
                    return;
                }
            },
            add(ele) {
                ele.number++;
            },
            del(ele) {
                // 用户点击的这一项从购物车数据里面移除，过滤操作 filter
                this.cartList = this.cartList.filter(item => {
                    // 遍历的项不等于用户删除的，则保留
                    return item.id != ele.id;
                })
            }
        }


    })

</script>
</html>
